<%@ page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>div</title>
<style type="text/css">
.damage {
	position: absolute;
	color: red;
	z-index: 4;
	display: none;
	font-weight: bold;
	font-size: large;
}
.carddiv {
      border:1px solid #FF6600;
      background-color:#FFCC00;
      width:100px;
      height:120px;
      float:left;     
      margin: 3px 3px 3px 3px;       
      position: relative;
}
.sectiondiv {
      position:relative;
      width:330px;
      height:250px;
      margin: 0 auto;
}
.pic {
      position:absolute;     
      width: 100%;
      height: 100%;
      margin: 0px 0px 0px 0px;     
      z-index: 3;
      background-color:#ffffff;    
}
.zhezhao {
      position:absolute;     
      width: 100%;
      height: 100%;
      margin: 0px 0px 0px 0px;     
      z-index: 4;
      background-color:#646464;     
      color: #646464;
}
img	{	
	width: 100%;
	height: 100%;			
}
.pic .mask{background-color: gray;opacity:0.4;}
.pic .mask{ position: absolute; bottom:0; left: 0; width: 100%; height: 10%; z-index: 1;}
</style>
<link rel="stylesheet" href="../css/jquery-ui-1.10.1.custom.css" />
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.1.custom.js"></script>
<script type="text/javascript" src="../js/swap.js"></script>
<script type="text/javascript">
	$(function() {
		 $("#mysection .carddiv").redswap({
	         speed:'slow',
	         opacity:0.6
	      });
		 $("button").button().click(function(event){
			 bettle();
	      });
	});
	/*
	var FUNC = [ function() {		
		$("#1").animate({marginLeft : '-=50px',			height : '+=100px',			width : '+=100px'		}, 200, aniCB);
	}, function() {		$("#1").animate({marginLeft : '+=50px',			height : '-=100px',			width : '-=100px'		}, 200, aniCB);
	}, function() {		$("#7").animate({marginLeft : '-=10px'		}, 30, aniCB);	}, 
		function() {$("#7").animate({			marginLeft : '+=20px'		}, 30, aniCB);	},
		function() {	$("#7").animate({			marginLeft : '-=10px'		}, 30, aniCB);	}, 
		function() {		$("#damage").animate({			height : 'show'		}, 200, aniCB);	}, 
		function() {		$("#damage").animate({			marginTop : '-=50px'		}, 400, aniCB);	},
		function() {$("#damage").animate({			height : 'hide'		}, 200, aniCB);	}, ];
	*/
	var FUNC=[function(){$("#0").animate({marginLeft:'-=50px',height:'+=100px',width:'+=100px'},200);}];
	var shownext = function() {
		$(document).dequeue("myAnimation");
	};
	//$(document).queue("myAnimation", FUNC);
	function move() {
		var offset = $("#molisha").offset(); //获取p元素的offset()  

		var left = offset.left; //获取左偏移  

		var top = offset.top;
		$("#damage").css("margin-left", left + 30);
		$("#damage").css("margin-top", top + 50);
		aniCB();
	}
	function bettle(){
		$.ajax({
			type: "POST",
	        url: "battle/battle",
	        data:{"playerCardIds":"1,2,3"},
	        dataType: "text",
	        success: function(data){	        	
	        	var temp=eval(data);
	        	$(document).queue("myAnimation", temp);
	        	shownext();
	        }
		});
	}
</script>

</head>

<body>

<div id="damage" class="damage">100</div>
<div>
<div class="sectiondiv">
	<s:iterator var="npc" value="#request['npc']" status="statu">
		<div class="carddiv">   	
   			<div id="<s:property value="#statu.index"/>" class="pic">
   				<img src="../image/<s:property value="pic"/>">
   				<div class="mask"></div>
   			</div>   	
		</div>
	</s:iterator>
</div>   
<div style="margin: 0 auto;width: 330px;height: 50px;line-height: 50px;text-align: center;"><button>战斗开始</button></div>
<div id="mysection" class="sectiondiv">
   <s:iterator var="player" value="#request['player']" status="statu">
		<div class="carddiv">   	
   			<div id="<s:property value="#statu.index+6"/>" class="pic">
   				<img src="../image/<s:property value="pic"/>">
   				<div class="mask"></div>
   			</div>   	
		</div>
	</s:iterator>
</div>	
</div>
</body>
</html>
